<#import "spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>BOSS-CRM管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include 'include/baselink.ftl'>
</head>

<body class="error-page sb-l-o sb-r-c onload-check">
<#include 'include/skin-toolbox.ftl'>
<div id="main">
<#include 'include/header.ftl'>
<#include 'include/sidebar.ftl'>
    <section id="content_wrapper">
        <header id="topbar" class="alt">
            <div class="topbar-left">
                <ol class="breadcrumb">
                    <li class="crumb-active">
                        <a href="<@s.url '/'/>">控制台</a>
                    </li>
                    <li class="crumb-icon">
                        <a href="<@s.url '/'/>">
                            <span class="glyphicon glyphicon-home"></span>
                        </a>
                    </li>
                    <li class="crumb-link">
                        <a href="<@s.url '/'/>">首页</a>
                    </li>
                    <li class="crumb-trail">控制台</li>
                </ol>
            </div>
        </header>
        <section id="content" class="pn">

            <div class="tray tray-center">
                <div class="pt10 pl20 pb10 mb10">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>张龙<small>&nbsp;&nbsp;<label class="label label-success">采集库</label></small> <small>| 渠道: <label class="text-primary">厚泽担保</label></small> <small>| 金额: <label class="text-primary">0.05万</label></small> <small>| 商务经理: <label class="text-primary">魏万玉</label></small> <small>| 交付经理: <label class="text-primary"></label></small> <small>| 协作人:
                                <a href="#"><i class="fa fa-pencil m-l-xs"></i></a></small>
                            </h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="btn-group">
                                <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle btn-sm">
                                    <i class="fa fa-plus"></i> 添加 <span class="caret ml5"></span>
                                </button>
                                <ul role="menu" class="dropdown-menu"><li>
                                    <a href="#"><i class="fa fa-plus-circle mr5"></i>创建工单</a></li>
                                    <li><a href="#"><i class="fa fa-plus-circle mr5"></i>创建收款流水</a></li>
                                </ul>
                            </div> <!---->
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading pn">
                        <ul class="nav panel-tabs-border panel-tabs panel-tabs-left">
                            <li class="active">
                                <a href="#tab_index" data-toggle="tab" aria-expanded="true">订单详情</a>
                            </li>
                            <li>
                                <a href="#tab1_2" data-toggle="tab" aria-expanded="false">资料清单</a></li>
                            <li><a href="#tab_work_orders" data-toggle="tab" aria-expanded="false">工单列表</a></li>
                            <li><a href="'#tab_capital_details" data-toggle="tab" aria-expanded="false"><span class="fa fa-list pr5"></span>收支流水</a>
                            </li>
                            <li><a href="'#tab_outsite_income" data-toggle="tab"><span class="fa fa-list pr5"></span>外部挂账</a></li>
                            <li><a href="'#tab_order_settle" data-toggle="tab">
                                <span class="fa fa-list pr5"></span>结算明细</a></li>
                            <li><a href="'#tab_order_logs" data-toggle="tab">
                                <span class="fa fa-list pr5"></span>操作日志</a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div id="tab_index" class="tab-pane active">

                                <div class="col-sm-6">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <h4 class="text-primary">人员信息</h4>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <form class="form-horizontal">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">客户姓名:</label>
                                                            <div class="col-sm-10">
                                                                <pencil-input2 v-model="order.name" v-on:changed = "saveOrder" />
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">渠道名称:</label>
                                                            <div class="col-sm-10">
                                                                <pencil-input2 v-model="order.channelName" v-on:changed = "saveOrder" />
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <h4 class="text-primary">金额信息</h4>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <table class="table table-condensed">
                                                        <tbody>
                                                        <tr>
                                                            <th class="bold" width="20%">贷款金额(W):</th>
                                                            <td width="80%">
                                                                <pencil-input2 v-model="order.loanAmount" v-on:changed="saveOrder"/>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th class="bold" width="20%">贷款期限(月):</th>
                                                            <td width="80%">
                                                                <pencil-input2 v-model="order.loanDuration" v-on:changed="saveOrder"/>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th class="bold" width="20%">服务费率(%):</th>
                                                            <td width="80%">
                                                                <pencil-input2 v-model="order.totalRate" v-on:changed="saveOrder"/>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th class="bold" width="20%">渠道返率(%):</th>
                                                            <td width="80%">
                                                                <pencil-input2 v-model="order.channelRate" v-on:changed="saveOrder"/>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



        </section>
    <#include 'include/footer.ftl' />
    </section>
<#include 'include/footer_js.ftl'/>
</div>
<#--<#include 'component/pencil-select.ftl'/>-->
<#--<#include 'component/pencil-input.ftl'/>-->
<#include 'component/bbt-input.ftl'/>


<script>
    var app = new Vue({
        el: '#main',
        data: {
            user: {
                name: 'name'
            },
            order: {
                name: '张龙',
                channelName: '小小金融',
                businessManager: '',
                loanAmount: 100,
                loanDuration: 36,
                totalRate: 6,
                channelRate: 3
            },
            userName: '木叶丸',
            amibaId: 1,
            amibaName: '交付一巴',
            amibaList: [
                {
                    key: 1,
                    value: '交付一巴'
                },
                {
                    key: 2,
                    value: '交付二巴'
                }
            ]
        },
        mounted: function() {
            toastr.options = {
                closeButton: true,
                debug: false,
                progressBar: true,
                positionClass: "toast-top-right",
                onclick: null,
                showDuration: "1000",
                hideDuration: "1000",
                timeOut: "5000",
                extendedTimeOut: "5000",
                showEasing: "swing",
                hideEasing: "linear",
                showMethod: "fadeIn",
                hideMethod: "fadeOut"
            };
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            saveOrder: function() {
                toastr.success("操作成功！", "订单信息修改完成");
                console.log(this.order);
            },
            getData: function () {
                //调用插件中的参数时需要先通过以下方式获取
                this.userName = this.$refs.alert.content;
                console.log(this.userName);
                this.amibaId = this.$refs.alert2.optionkey;
                this.amibaName = this.$refs.alert2.optionvalue;
                console.log(this.amibaId);
            }
        }
    })
</script>
</body>

</html>
